<template>
	<view class="jyuHeader">
		<image class="headerLogo" src="@/static/imgs/jyuLogo2.png" mode="aspectFill" @click="logingogo"></image>
		<view class="headerTitle"> 嘉大学生荟 </view>
	</view>
	<van-search :value="searchValue" placeholder="请输入搜索关键词" @search="searchPost" @change='onChange' @cancel="onCancel"
		:show-action="isInSearch" />
	<van-tabs v-model:active="typeData" swipeable color="blue" sticky @change="changeType" :z-index="10">
		<van-tab :title='typeName[index]' v-for="(data, index) in PostData" :key="index">
			<PostsList :postData="data" @update:page="handlePageUpdate" :page="page" :total='total' :type="type" />
		</van-tab>
	</van-tabs>
	<ToTop :ifShow='ifShowToTop' />
</template>

<script setup>
import PostsList from "./components/PostsList.vue";
import {
	onMounted,
	reactive,
	ref,
	inject,
	provide
} from "vue";
import ToTop from "../../components/ToTop.vue";
import {
	onReachBottom
} from "@dcloudio/uni-app";
import {
	throttle
} from '@/utils/throttle.js'
import {
	onShow,
	onPullDownRefresh
} from "@dcloudio/uni-app";
import {
	getPostsType
} from "@/apis/apis.js";
onMounted(() => {
	onReachBottom(onPageBottom);
});
const onPageBottom = throttle(() => {
	console.log('触底')
	if (page.value * 10 >= total.value)
		return
	page.value++; // 页码加1
	handlePageUpdate()
}, 500)
// const logingogo = () => {
// 	uni.navigateTo({
// 		url: "/pages/login/login",
// 	});
// };
import {
	onPageScroll
} from '@dcloudio/uni-app';
const ifShowToTop = ref(false)
onPageScroll((e) => {
	if (e.scrollTop > 400) {
		ifShowToTop.value = true
	} else {
		ifShowToTop.value = false
	}
});
//----
const searchValue = ref('')
const isInSearch = ref(false)
const searchPost = () => {
	if (searchValue.value === '')
		return uni.showToast({
			title: '搜索内容不能为空',
			icon: 'none'
		})
	changeType({
		detail: {
			index: typeData.value,
		},
	});
	isInSearch.value = true
}
const onChange = (e) => {
	searchValue.value = e.detail
}
const onCancel = () => {
	searchValue.value = ''
	changeType({
		detail: {
			index: typeData.value,
		},
	});
	isInSearch.value = false

}
//---------
const PostData = reactive([
	[],
	[],
	[],
	[]
])
const typeData = ref(0)
const page = ref(1);
const total = ref(0)
const type = ref('')
// throttle(, 500)
// 记得优化这段狗屎
const handlePageUpdate = async () => {
	// 根据新的页码加载数据
	const tempType = typeData.value.toString()
	const res = await getPostsType({
		pageNum: page.value,
		pageSize: 10,
		type: tempType,
		statu: 1,
		content: searchValue.value,
	})
	if (searchValue.value) {
		const test = new RegExp(searchValue.value, 'gi');
		res.data = res.data.map(item => {
			item.content = item.content.replace(test, (match) =>
				`<b style="color:#027cc5;">${match}</b>`)
			return {
				...item
			}
		})
	}
	PostData[typeData.value] = PostData[typeData.value].concat(res.data)
}
const typeName = ['公告', '失物招领', '意见反馈', '社团活动']
const changeType = async (e) => {
	uni.showLoading({
		mask: true,
		title: '加载中'
	})
	typeData.value = e.detail.index
	page.value = 1;
	total.value = 0;
	const temptype = typeData.value.toString()
	const res = await getPostsType({
		pageNum: 1,
		pageSize: 10,
		type: temptype,
		statu: 1,
		content: temptype !== '0' ? searchValue.value : '',
		title: temptype === '0' ? searchValue.value : ''
	});
	total.value = res.total
	type.value = typeName[typeData.value]
	if (searchValue.value) {
		const test = new RegExp(searchValue.value, 'gi');
		if (temptype === '0') {
			console.log(res, 'lores');
			res.data = res.data.map(item => {
				item.title = item.title.replace(test, (match) =>
					`<b style="color:#ffaa7f;">${match}</b>`)
				return {
					...item
				}
			})
		} else {
			res.data = res.data.map(item => {
				item.content = item.content.replace(test, (match) =>
					`<b style="color:#027cc5;">${match}</b>`)
				return {
					...item
				}
			})
		}
	}
	PostData[typeData.value] = res.data
};



onShow(() => {
	const globalData = inject('globalData')
	if (!PostData[typeData.value].length || globalData.needRefresh) {
		changeType({
			detail: {
				index: typeData.value,
			},
		});
		globalData.needRefresh = false
	}
});
onPullDownRefresh(() => {
	changeType({
		detail: {
			index: typeData.value,
		},
	});
});
</script>

<style lang="less" scoped>
.jyuHeader {
	height: 400rpx;
	width: 100%;
	background: linear-gradient(147deg, #e7dff2 0%, #c5e5ee 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.headerLogo {
		height: 300rpx;
		width: 300rpx;
	}

	.headerTitle {
		font-size: 50rpx;
	}
}
</style>